import React, {
    PureComponent
} from 'react';

import {
    View,
    Image,
    StyleSheet,
    TextInput
} from 'react-native';

import {
    File,
    Press,
    Button
} from './../../components';

import send_icon  from './img/send_img.png';

interface Props {
    onSendFile:Function,
    onSendText:Function
}

interface State {
    text:string
}

class InputView extends PureComponent<Props,State> {
    state = {
        text:``
    }

    static defaultProps = {
        onSendFile:() => null,
        onSendText:() => null
    }

    private _onChange = (e:any) => {
        const {
            onSendFile
        } = this.props;
        onSendFile(e);
    }

    private _onChangeText = (text:string) => {
        this.setState({
            text:text
        })
    }

    private _onSendText = () => {
        const {
            text
        } = this.state;

        const {
            onSendText
        } = this.props;

        onSendText(text)

        this.setState({
            text:``
        })
    }

    render() {
        const {
            text
        } = this.state;

        return (
            <View style={styles.container}>
                <File onChange={this._onChange}>
                    <Press style={styles.sendImage}>
                        <Image source={send_icon} />
                    </Press>
                </File>
                <TextInput
                    value={text}
                    style={styles.inputStyle}
                    placeholder="Send a message.."
                    placeholderTextColor="#8A92AE"
                    onChangeText={this._onChangeText}
                />
                <Button
                    title="Send"
                    disabled={!text.trim()}
                    style={styles.sendButton}
                    onPress={this._onSendText}
                />
            </View>
        )
    }
}

export default InputView;

const styles = StyleSheet.create({
    container:{
        height:72,
        paddingRight:16,
        flexDirection:`row`,
        alignItems:`center`,
        backgroundColor:`#fff`,
        borderColor:`#ececec`,
        borderTopWidth:1
    },
    inputStyle:{
        flex:1,
        height:42,
        color:`#333`,
        fontSize:16,
        borderRadius:6,
        marginRight:10,
        paddingHorizontal:12,
        backgroundColor:`#f2f2f2`
    },
    sendImage:{
        height:64,
        alignItems:`center`,
        paddingHorizontal:16,
        justifyContent:`center`
    },
    sendButton:{
        height:40,
        borderRadius:20,
        paddingHorizontal:20
    }
}) as any;